<template>
  <section class="OceGrid">
    <div
      class="box"
      :style="boxStyle"
    >
      <div
        class="item"
        v-for="(item,index) in (column * row)"
        :key="item"
        :style="itemStyle[index] ? itemStyle[index] : {}"
      >
        <slot
          :row="gridData[index] || {}"
          :index="index"
        />
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "OceGrid",
  props:{
    column:{
      type: Number,
      default: function() {
        return 3
      }
    },
    row:{
      type: Number,
      default: function() {
        return 3
      }
    },
    sizes:{
      type: Array,
      default: function() {
        return [[1,1]]
      }
    },
    gridData:{
      type: Array,
      default: function() {
        return []
      }
    },
    customStyle:{
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  mounted() {
  },
  computed: {
    itemStyle() {
      let items = this.sizes.map(item => {
        return {
          gridColumnEnd: `span ${item[0]}`,
          gridRowEnd: `span ${item[1]}`
        }
      })
      return items 
    },
    boxStyle() {
      return {
        ...this.customStyle,
        gridTemplateColumns: `repeat(${this.column}, ${100/this.column}%)`,
        gridTemplateRows: `repeat(${this.row}, ${100/this.row}%)`
      }
      
    },
  },
}
</script>

<style lang="scss" scoped>
.OceGrid{
  width: 100%;
  height: 100%;

  .box{
    width: 100%;
    height: 100%;
    display: grid;
    overflow: hidden;
  }
}
</style>